<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div>
        <van-empty description="宠物话题收藏为空" v-if="item == ''" />
        <div id="box" v-else>
          <div id="id" v-for="(numb, index) in item" :key="numb.ctid">
            <router-link :to="`/moredetail/${numb.ctid}`">
              <Pettopic
                :title="item[index].title"
                :time="item[index].time"
                :imgname="item[index].imgname"
                :name="item[index].name"
                :describe="item[index].describe"
              />
            </router-link>
            <van-icon
              name="delete-o"
              id="aa"
              @click="submit(numb.uid, numb.title)"
            />
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import Pettopic from "@/components/Pettopics.vue";
import { getPet, delPet } from "@/api/request";
import { Toast } from "vant";
import { mapState } from "vuex";
import { Dialog } from "vant";
export default {
  data() {
    return {
      active: 2,
      numb: [],
      item: [],
      isLoading: false,

      loading: false,
      finished: false,
      checkAllFlag: false,
      CheckedAllArr: [],
      info: "",
      tit: "",
    };
  },
  components: {
    Pettopic,
  },
  methods: {
    submit(information, tii) {
      this.info = information;
      this.tit = tii;
      console.log(this.info);
      delPet({ uid: this.info, title: this.tit }).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          Dialog({ message: "删除成功" });
          this.a();
        }
      });
    },

    // check() {
    //   this.$refs.checkboxGroup.toggleAll(true);
    // },
    // toggleAll() {
    //   this.$refs.checkboxGroup.toggleAll();
    // },
    //全选
    // checkAll(val) {
    //   let checkedCount = this.CheckedA11Arr.length;
    //   if (val) {
    //     //全选

    //     this.CheckedAllArr = this.item.map((numb) => numb.ctid);
    //   } else {
    //     //取消全选
    //     if (checkedCount === this.item.length) {
    //       //如果不增加这个条件判断点击某一项时会全部取消
    //       this.CheckedA1lArr = [];
    //     }
    //   }
    // },
    //单选
    // handleChecked() {
    //   this.checkAllFlag = this.CheckedAllArr.length == this.item.length;
    // },

    a() {
      getPet({ uname: this.$store.state.user.uname }).then((res) => {
        console.log(123123);
        console.log(res);
        console.log(res.data);
        console.log(88888);
        this.item = res.data.message;
      });
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.a();
      }, 1000);
    },
  },
  mounted() {
    this.a();
  },
  computed: {
    //mapState将开放vuex中保存的user对象到当前组件的计算属性中
    //这样，在当前组件内部,就可以直接使用user来访问vuex中的user
    ...mapState(["user"]),
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-tabs__line {
  width: 50px;
  height: 2px;
}
#box {
  height: calc(100% - 94px);
}

* {
  box-sizing: border-box;
  color: #333;
}
#id {
  > #aa {
    font-size: 24px;
    position: relative;
    bottom: 165px;
    left: 290px;
    color: #fdd245;
  }
}
</style>